<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单例模式-透明单例</title>
</head>

<body>
    <script>
        // 完成再页面上创建唯一的div
        var createDiv = (function () {
            var instance
            // 构造函数
            var createDiv = function (html) {

                //⭐把控制单列的部分职责,抽离出来， 变得更加纯粹
                // 只用来生产div
                // if (instance) {
                //     return instance
                // }
                this.html = html
                this.init()
                // return instance = this
            }
            //原型方法 创建div
            createDiv.prototype.init = function () {
                var div = document.createElement('div')
                div.innerHTML = this.html
                document.body.appendChild(div)
            }
            return createDiv
        })()
        // console.log(createDiv);

        // let div1 = new createDiv(`<div>1111</div>`)
        // div1.init()
        // 单例模式,只会出现第1i个
        // let div2 = new createDiv(`<div>222</div>`)

        // console.log(div1 === div2);

        // 创建一个代理类，对原来的实例，进行代理
        var ProxySingletonCreateDiv = (function () {
            var instance;
            return function (html) {
                if (!instance) {
                    // 对某一个功能进行进一步处理，外围操作，如果需要参与内部，可以由类的接口提供方案
                    instance = new createDiv(html)
                }
                return instance
            }
        })()

        // 使用代理类，对原来的生产div对象，进行代理。代理时，增加额外逻辑
        var a = new ProxySingletonCreateDiv(`<div>111</div>`)
        var b = new ProxySingletonCreateDiv(`<div>222</div>`)
        console.log(a, b, a === b);
    </script>

</body>

</html>